<template>
  <!-- 添加或修改用户配置对话框 -->
  <el-dialog
    :title="isEdit ? '修改团队成员' : '新增团队成员'"
    :visible.sync="visible"
    width="600px"
    append-to-body
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="成员姓名" prop="memberName">
            <el-input
              v-model="form.memberName"
              placeholder="请输入成员姓名"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请选择性别">
              <el-option
                v-for="dict in dict.type.sys_user_sex"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="学号" prop="studentNumber">
            <el-input v-model="form.studentNumber" placeholder="请输入学号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="研究方向" prop="researchDirection">
            <el-select
              v-model="form.researchDirection"
              placeholder="请选择研究方向"
            >
              <el-option
                v-for="dict in dict.type.member_research_direction"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="电话" prop="phone">
            <el-input
              v-model="form.phone"
              placeholder="请输入电话"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input
              v-model="form.email"
              placeholder="请输入邮箱"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="银行卡号" prop="bankCard">
            <el-input
              v-model="form.bankCard"
              placeholder="请输入银行卡号"
              maxlength="30"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入学日期" prop="email">
            <el-date-picker
              v-model="form.admissionDate"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              style="width: 200px"
              placeholder="选择入学日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="当前学历" prop="currentEducationLevel">
            <el-select
              v-model="form.currentEducationLevel"
              placeholder="请选择当前学历"
            >
              <el-option
                v-for="dict in dict.type.member_current_education_level"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="在校状态" prop="inSchoolStatus">
            <el-select
              v-model="form.inSchoolStatus"
              placeholder="请选择在校状态"
            >
              <el-option
                v-for="dict in dict.type.member_in_school_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { AddMember } from "@/api/member/member";
export default {
  name: "AddMember",
  dicts: [
    "sys_user_sex",
    "member_research_direction",
    "member_in_school_status",
    "member_current_education_level",
  ],
  data() {
    return {
      visible: false,
      isEdit: false,
      form: {
        memberName: "", // 姓名
        sex: "", // 性别
        studentNumber: "", // 学号
        researchDirection: "", // 研究方向
        phone: "", // 电话
        email: "", // 邮箱
        bankCard: "", // 银行卡号
        admissionDate: "", // 入学时间
        currentEducationLevel: "", // 当前学历
        inSchoolStatus: "", // 在校状态
      },
      // 表单校验
      rules: {
        memberName: {
          required: true,
          message: "成员姓名不能为空",
          trigger: "change",
        },
        sex: { required: true, message: "用户性别不能为空", trigger: "change" },
        studentNumber: {
          required: true,
          message: "学号不能为空",
          trigger: "change",
        },
        researchDirection: {
          required: true,
          message: "研究方向不能为空",
          trigger: "change",
        },
      },
    };
  },
  methods: {
    show(id) {
      this.visible = true;
      this.isEdit = !!id;
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.userId != undefined) {
            updateUser(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$emit("refresh");
              this.cancel();
            });
          } else {
            AddMember(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.$emit("refresh");
              this.cancel();
            });
          }
        }
      });
    },
    reset() {
      this.form = {
        name: "",
        sex: "",
        studentNumber: "",
        researchDirection: "",
      };
    },
    cancel() {
      this.visible = false;
      this.reset();
    },
  },
};
</script>

<style>
</style>